<template>
	<view class="content flex-c" style="padding-top: 50%">
		<LuckyWheel
			ref="myLucky"
			width="550rpx"
			height="550rpx"
			:blocks="blocks"
			:prizes="prizes"
			:buttons="buttons"
			:defaultStyle="defaultStyle"
			@start="startCallBack"
			@end="endCallBack"
		/>
		<view class="mt16 white textCenter">剩余次数：{{ count }}</view>
		<view class="mt16 white textCenter" v-show="isLucky">
			恭喜你，抽中了
			<text class="fb">{{ resut }}</text>
		</view>
	</view>
</template>

<script>
import Utils from '@/utils/utils.js'
// import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
import LuckyWheel from '../components/@lucky-canvas/uni/lucky-wheel.vue'
import { startPrize, addLotteryRecord } from '@/api/mine.js'
export default {
	components: { LuckyWheel },
	data() {
		return {
			tMerchantid: '',
			count: 1,
			resut: '',
			isLucky: false,
			blocks: [{ padding: '13px', background: '#BA946F' }],
			prizes: [
				{ fonts: [{ text: '1等奖', top: '10%' }], background: '#e9e8fe' },
				{ fonts: [{ text: '2等奖', top: '10%' }], background: '#b8c5f2' },
				{ fonts: [{ text: '3等奖', top: '10%' }], background: '#e9e8fe' },
				{ fonts: [{ text: '4等奖', top: '10%' }], background: '#b8c5f2' },
				{ fonts: [{ text: '5等奖', top: '10%' }], background: '#e9e8fe' },
				{ fonts: [{ text: '6等奖', top: '10%' }], background: '#b8c5f2' }
			],
			buttons: [
				{ radius: '35%', background: '#fff' },
				{ radius: '30%', background: '#afc8ff' },
				{
					radius: '25%',
					background: '#FF5255',
					pointer: true,
					fonts: [{ text: '开始', top: '-10px' }]
				}
			]
		}
	},
	onLoad(option) {
		let data = JSON.parse(option.data)
		this.tMerchantid = option.tMerchantid
		console.log(this.tMerchantid)
		let newData = data.map((name, index) => ({
			fonts: [{ text: name, top: '15%' }],
			background: index % 2 === 0 ? '#EEF0FF' : '#F9FBF5'
		}))
		console.log(newData)
		this.prizes = newData
	},
	methods: {
		// 点击抽奖按钮触发回调
		startCallBack() {
			if (this.count == 0) {
				Utils.toast('次数不足')
				return
			}
			this.$refs.myLucky.play()
			// 使用定时器来模拟请求接口
			//setTimeout(() => {
			// 假设后端返回的中奖索引是0
			startPrize(this.tMerchantid).then(
				(res) => {
					console.log(res)
					if (res.code == 200) {
						let checkName = res.prizeName
						const index = this.prizes.findIndex((prize) => prize.fonts[0].text === checkName)
						this.saveLottery(res.prizeId)
						this.$refs.myLucky.stop(index)
					}
				},
				(err) => {
					console.log(err)
				}
			)
			//const index = 0
			// 调用stop停止旋转并传递中奖索引
			//this.$refs.myLucky.stop(index)

			// 先开始旋转
			this.count = this.count - 1
			//}, 3000)
		},
		// 抽奖结束触发回调
		endCallBack(prize) {
			// 奖品详情
			console.log(prize)
			this.isLucky = true
			this.resut = prize.fonts[0].text
		},
		saveLottery(prizeId) {
			let params = {
				tMemberid: Utils.getUserInfo().tMemberid,
				tMerchantid: this.tMerchantid,
				tPrizeid: prizeId
			}
			console.log(params)
			addLotteryRecord(params).then(
				(res) => {
					console.log(res)
				},
				(err) => {
					console.log(err)
				}
			)
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	min-height 100%
	background url('https://www.helloimg.com/i/2024/09/26/66f4fe675e590.jpg') no-repeat top center
	background-size cover
</style>
